<template>
    <div class="app-container">
        <div class="warp_padding">  

            <div class="head-container">
                <!-- 搜索 -->
                <el-input v-model="formDate.roleName" clearable placeholder="输入角色名称搜索" style="width: 160px;" class="filter-item" @keyup.enter.native="toQuery" @change="toQuery()"/>

                <!-- <el-input v-model="formDate.roleSign" clearable placeholder="输入角色标识搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" @change="toQuery()"/> -->

                <el-button class="filter-item" size="mini" type="primary" icon="el-icon-search" @click="toQuery">搜索</el-button>
                <!-- 新增 -->
                <div style="display: inline-block;margin: 0px 2px;">
                  <el-button
                    v-if="checkPermission(['admin','role_all','role_add'])"
                    class="filter-item"
                    size="mini"
                    type="primary"
                    icon="el-icon-plus"
                    @click="add">新增</el-button>
                  <eForm ref="form" :is-add="isAdd"/>
                </div>
            </div>

            <!--表格渲染-->
            <el-table :data="lists" highlight-current-row v-loading="listLoading"  style="width: 100%;" max-height="650">
                <el-table-column type="index" width="45">
                </el-table-column>

                <el-table-column prop="roleName" label="角色名称" :show-overflow-tooltip="true" min-width="130"></el-table-column>

                <!-- <el-table-column prop="roleSign" label="角色标识"  ></el-table-column> -->

                <el-table-column prop="description" :show-overflow-tooltip="true"  label="角色描述"  class="description"></el-table-column>
           
                <!-- <el-table-column prop="type" label="角色类型" :formatter="type" sortable></el-table-column> -->

                <el-table-column :show-overflow-tooltip="true" prop="type"  label="角色类型">
                    <template slot-scope="scope">
                        <el-tag type="warning" v-if="scope.row.type =='0'">区域角色</el-tag>
                        <el-tag v-if="scope.row.type =='1'">老师角色</el-tag>
                        <el-tag type="success" v-if="scope.row.type =='2'">学生角色</el-tag>
                    </template>
                </el-table-column>

                <el-table-column label="操作"  width="380">
                    <template slot-scope="scope">
                        <el-button size="mini" v-if="checkPermission(['admin','role_all','role_edit'])" type="warning" plain @click="handroleLock(scope.$index, scope.row.id)">授权</el-button>
                        <el-button size="mini" v-if="checkPermission(['admin','role_all','role_edit'])" type="primary" plain @click="handleRole(scope.$index, scope.row.id, scope.row.type)">分配用户</el-button>
                        <el-button size="mini"  v-if="checkPermission(['admin','role_all','role_edit'])  && scope.row.isFixed =='1'" type="success" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button type="danger" v-if="checkPermission(['admin','role_all','role_del']) && scope.row.isFixed =='1'" size="mini" @click="handleDel(scope.$index, scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>

            </el-table>
        </div>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-pagination background  @size-change="handleSizeChange"  @current-change="handleCurrentChange"  :current-page.sync="formDate.pageNo" :page-count="pageCount" :page-sizes="[10, 20, 30, 50,100]"  layout="total, sizes,prev, pager, next, jumper" :pager-count="pagerCount" :total="total" class="pagination"></el-pagination>
        </el-col>
        <roletree ref="roletree" :is-add="isAdd"/>
        <rolelock ref="rolelock" :is-add="isAdd"/>
    </div>
</template>


<script>
import checkPermission from '@/utils/permission' 
import initData from '@/mixins/initData'
import { parseTime } from '@/utils/index'
import { roleLock } from '@/api/menu'
import {roleList, roleDel, roleTree} from '@/api/request'
import eForm from './module/form'
import roletree from './module/roletree'
import rolelock from './module/rolelock'
export default {
    components: { eForm, roletree,rolelock},
    mixins: [initData],
    data() {
        return {
            pageCount: 0,
            total:0,  
            listLoading: false,
            lists: [],
            pagerCount:11,   
            formDate:{
                pageNo: 1,  
                pageSize:10,
                permissionGrade:1,
                roleName:'',
                roleSign:''   
            },
            isAdd:true,
            
        }
    },
    mounted:function(){
        this.init()
    },
    methods: {
        parseTime,
        checkPermission,
        // type(row, column) {
        //     return row.type == 0 ? '区域角色' : row.type == 1 ? '学校角色' : '其他';
        // },
        handleCurrentChange(val) {
            this.formDate.pageNo = val;
            this.init()
        },
        handleSizeChange(val) {
            this.formDate.pageSize = val
            this.init()
            // console.log(`page ${val}`);
        },
        toQuery(){
            this.init()
        },
        add(){
            this.isAdd = true
            this.$refs.form.form = { roleName: '', roleSign: '',isFixed:"1",type: 0,description:'' },
            this.$refs.form.dialog = true
        },
        init(){
            this.formDate.roleName = this.formDate.roleName.trim()
            let params = {...this.formDate}
            roleList(params).then(res => { 
                let { list, total } = res
                this.lists = list
                this.total = total 
            })
        },
        handroleLock(index,roleId){
            this.$refs.rolelock.dialog = true
            this.isAdd = false
            roleLock(roleId).then(res =>{
                // let arr = []
                // arr.push(res.data.dto) //对象转数组对象
                // this.$refs.rolelock.data2 = arr
                if (res.code ==2000) {
                    this.$refs.rolelock.data2 = res.data.dto
                    this.$refs.rolelock.roleId = roleId
                    this.$refs.rolelock.checkList = res.data.checkList
                    this.$refs.rolelock.setCheckedKeys()
                } 
                // setTimeout(() => {//避免js执行顺序问题
                //      this.$refs.rolelock.setCheckedKeys()            
                // }, 200)           
            })
        },
        handleRole(index,id,type){
            let params = { roleId: id, type:type };
            this.$refs.roletree.dialog = true
            this.isAdd = false
            roleTree(params).then(res =>{
                let menus = []
                const menu = { id: -2, name: '全选', children: [] }
                menu.children = res.data.userList
                menus.push(menu)
                this.$refs.roletree.data2 = menus
                this.$refs.roletree.roleId = id
                this.$refs.roletree.checkList = res.data.checkList
                this.$refs.roletree.setCheckedKeys()
            })
        },
        handleEdit: function (index, row) {
            this.$refs.form.dialog = true
            this.isAdd = false
            this.$refs.form.form = Object.assign({}, row);
        },
        handleDel(index,ID){
            let ids = [];
            ids.unshift(ID)
            this.$confirm('确认删除该记录吗?', '提示', {
                        type: 'warning'
                    }).then(() => {
                        this.listLoading = true;
                        roleDel(ids).then(res => {
                            this.listLoading = false;
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            if (this.lists.length == 1 && this.formDate.pageNo != 1) {
                                this.formDate.pageNo = this.formDate.pageNo -1
                            }
                            this.init();
                        })

                    }).catch(() => {
            });
        }
        
    }
}
</script>

<style lang="scss" scoped>

</style>
